<template>
    <div class="myArea">
       <!-- 背景 -->
       <div class="login" v-if="user.username">
           <div class="backImg">
               {{user.username}}
           </div>

           <!-- 订单 -->
            <div class="ordersArea">
                <div class="allOrders">
                    全部订单
                </div>
                <div class="noPayOrders">
                    待付款
                </div>
                <div class="sendOrders">
                    待收货
                </div>
            </div>
       <!-- 其他页面 -->
            <div class="addressArea">
                地址管理
            </div>
            <div class="teleArea">
                联系客服
            </div>
       </div>
       <!-- 未登录 -->
       <div class="noLogin" v-else>
           <!-- <button >去登录</button> -->
           <router-link to="/login" tag="button">去登录</router-link>
       </div>
       
    </div>
</template>
<script>
export default {
    name:'my',
    data(){
        return{
            user:{
                    username:'YanHilin',
                    password:'YanHilin_1190',
                    sex:"女"
                }
        }
    },
    mounted(){

    },
    methods:{

    }
}
</script>
<style lang="less" scoped>
.myArea{
    height: 100%;
    width: 100%;
}
// 登录
.login{
    height: 100%;
    width: 100%;
    .backImg{
        background-color: aqua;
        height: 200px;
    }
    .ordersArea{
        height: 35px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        background-color: goldenrod;
    }
}
// 未登陆
.noLogin{
    height: 100%;
    width: 100%;
    background-color: gold;
    button{
        height: 40px;
        width: 20%;
        margin-top: 45%;
    }
}
</style>